import React from 'react'
import "./index.less"
// vant组件
import { NavBar } from 'react-vant';

import newTouch from "../../../utils/touch"
export default function AddFriend(props) {
    React.useEffect(() => {
       
    }, [])
    // 返回
    const back = () => {
        props.history.push({
            pathname:props.location.state.path,
            state:{path:props.location.state.oldPath}
        })
    }

    // 功能列表数据
    const [funList] = React.useState([
        {
            bg:"rgb(111 22 236)",
            title:"雷达找朋友",
            brief:"添加身边的朋友",
            size:"18px",
            icon:"#icon-leidatu"
        },
        {
            bg:"rgb(11 193 94)",
            title:"面对面建群",
            brief:"与身边的朋友进入同一个群聊",
            size:"28px",
            icon:"#icon-pengyou"
        },
        {
            bg:"rgb(0 114 214)",
            title:"扫一扫",
            brief:"扫描二维码名片",
            size:"19px",
            icon:"#icon-saoyisao"
        },
        {
            bg:"rgb(250,155,45)",
            title:"手机联系人",
            brief:"添加或邀请通讯录中的朋友",
            size:"20px",
            icon:"#icon-xindepengyou1"
        },
        {
            bg:"rgb(0 114 214)",
            title:"公众号",
            brief:"获取更多资讯和服务",
            size:"21px",
            icon:"#icon-gongzhonghao"
        },
        {
            bg:"rgb(0 114 214)",
            title:"企业微信联系人",
            brief:"通过手机号搜索企业微信用户",
            size:"20px",
            icon:"#icon-qiyeweixin"
        }
    ])
    // 功能列表区事件
    const operation = (e,item) => {
        console.log(item);
    }
    // 查看二维码事件
    const QRCodeCard = () => {
        console.log('二维码名片');
    }

    // 跳转到搜索页
    const tosearch = () => {
        props.history.push({
            pathname:"/main/addFriendSearchPage",
            state:{
                path:props.location.pathname,
                oldPath:props.location.state.path,
                old2Path:props.location.state.oldPath
            }
        })
    }

    const mainRef = React.useRef()
    return (
        <div className='addFriend'>
            <header>
                <NavBar
                    title="添加朋友"
                    style={{ backgroundColor: "#ededed" }}
                    leftArrow
                    onClickLeft={back}
                />
            </header>
            <main  ref={mainRef} onTouchStart={(e) => {newTouch.touchStart(e)}} onTouchMove={(e) => {newTouch.touchMove(e,mainRef)}} onTouchEnd={(e) => {newTouch.touchEnd(e,mainRef)}}>
                {/* 搜索框 */}
                <div className='search' onTouchEnd={tosearch}>
                    <p>
                        <svg className='icon' aria-hidden="true">
                            <use xlinkHref='#icon-sousuo1'></use>
                        </svg>
                        <span>微信号/手机号</span>
                    </p>
                </div>
                {/* 我的微信号 */}
                <div className='myWXNum'>
                    <span onTouchStart={QRCodeCard}>
                        我的微信号：yu15033896657
                        <svg className='icon' aria-hidden="true">
                            <use xlinkHref='#icon-erweima'></use>
                        </svg>
                    </span>
                </div>
                {/* 功能列表区 */}
                <ul>
                    {
                        funList.map((item,index) => {
                            return <li key={index} onTouchStart={(e) => {operation(e,item)}}>
                            <p>
                                <span style={{background:item.bg,fontSize:item.size}}>
                                    <svg className='icon' aria-hidden="true">
                                        <use xlinkHref={item.icon}></use>
                                    </svg>
                                </span>
                            </p>
                            <div>
                                <p>
                                    <span>{item.title}</span>
                                    <span>{item.brief}</span>
                                </p>
                                <p>
                                    <svg className='icon' aria-hidden="true">
                                        <use xlinkHref='#icon-youjiantou'></use>
                                    </svg>
                                </p>
                            </div>
                        </li>
                        })
                    }
                </ul>
            </main>
        </div>
    )
}
